<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		* {
			padding: 0;
			margin: 0;
			list-style: none;
		}

		body {
			display: flex;
			height: 100vh;
			justify-content: center;
			align-items: center;
			background-color: rgb(54, 66, 70);
		}

		.tree {
			position: relative;
			width: 500px;
			height: 700px;
			display: flex;
			justify-content: center;
		}

		.star {
			width: 50px;
			height: 50px;
			position: absolute;
			background-color: rgb(236, 234, 167);
			z-index: 999;
			margin-bottom: 40px;
			clip-path: polygon(50% 0, 65% 40%, 100% 40%, 72% 60%,
					85% 100%, 50% 75%, 15% 100%, 28% 60%, 0 40%, 35% 40%);
		}

		.tree li {
			position: absolute;
			top: 25px;
			width: 2px;
			background: linear-gradient(rgba(46, 204, 113, 0), rgba(46, 204, 113, .25));
			transform-origin: 50% 0;
			animation: swing 4s ease-in-out infinite;
			height: calc(var(--i)*4px);
			animation-delay: calc(var(--i)*-0.23s);
		}

		@keyframes swing {

			0%,
			100% {
				transform: rotate(-30deg);
			}

			5%,
			45% {
				opacity: 0.25;
			}

			0%,
			50%,
			100% {
				opacity: 1;
			}

			50% {
				transform: rotate(30deg);
			}
		}

		.tree li::before {
			content: '';
			position: absolute;
			left: -1px;
			bottom: 1px;
			width: 3px;
			height: 3px;
		}

		.tree li:nth-child(4n)::before {
			background-color: #D8334A;
		}

		.tree li:nth-child(4n+1)::before {
			background-color: #FFCE54;
		}

		.tree li:nth-child(4n+2)::before {
			background-color: #2ECC71;
		}

		.tree li:nth-child(4n+3)::before {
			background-color: #5D9CEC;
		}

		.snow-container {
			position: absolute;
			height: 100%;
			width: 150%;
			max-width: 100%;
			top: 0;
			overflow: hidden;
			z-index: 2;
			pointer-events: none;
		}

		.snow {
			display: block;
			position: absolute;
			z-index: 2;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			pointer-events: none;
			-webkit-transform: translate3d(0, -100%, 0);
			transform: translate3d(0, -100%, 0);
			-webkit-animation: snow linear infinite;
			animation: snow linear infinite;
		}

		.snow.foreground {
			background-image: url("https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-large-075d267ecbc42e3564c8ed43516dd557.png");
			-webkit-animation-duration: 15s;
			animation-duration: 15s;
		}

		.snow.foreground.layered {
			-webkit-animation-delay: 7.5s;
			animation-delay: 7.5s;
		}

		.snow.middleground {
			background-image: url(https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-medium-0b8a5e0732315b68e1f54185be7a1ad9.png);
			-webkit-animation-duration: 20s;
			animation-duration: 20s;
		}

		.snow.middleground.layered {
			-webkit-animation-delay: 10s;
			animation-delay: 10s;
		}

		.snow.background {
			background-image: url(https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-small-1ecd03b1fce08c24e064ff8c0a72c519.png);
			-webkit-animation-duration: 30s;
			animation-duration: 30s;
		}

		.snow.background.layered {
			-webkit-animation-delay: 15s;
			animation-delay: 15s;
		}

		@-webkit-keyframes snow {
			0% {
				-webkit-transform: translate3d(0, -100%, 0);
				transform: translate3d(0, -100%, 0);
			}

			100% {
				-webkit-transform: translate3d(15%, 100%, 0);
				transform: translate3d(15%, 100%, 0);
			}
		}

		@keyframes snow {
			0% {
				-webkit-transform: translate3d(0, -100%, 0);
				transform: translate3d(0, -100%, 0);
			}

			100% {
				-webkit-transform: translate3d(15%, 100%, 0);
				transform: translate3d(15%, 100%, 0);
			}
		}
	</style>
	<body>
		<div id="music" style="position:absolute;opacity: 0.1;z-index: 9999;">
			<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=1 height=1 src="//music.163.com/outchain/player?type=2&id=22509038&auto=1&height=66"></iframe>
		</div>
		<ul class="tree">
			<div class="star"></div>
		</ul>
		<div class="snow-container">
			<div class="snow foreground"></div>
			<div class="snow foreground layered"></div>
			<div class="snow middleground"></div>
			<div class="snow middleground layered"></div>
			<div class="snow background"></div>
			<div class="snow background layered"></div>
		</div>
		<script type="text/javascript">
			let tree = document.querySelector('.tree')
			for (let i = 0; i < 128; i++) {
				let li = document.createElement('li')
				li.style = "--i:" + i
				tree.appendChild(li)
			}
		</script>
	</body>
</html>
